<template>
    <div>
        <div id="content">
            <div>
                <i class="el-icon-menu"></i>
                <span>筛选</span>
            </div>
            <div id="search">
                <label>输入搜索</label>
                <el-input
                    id="input"
                    placeholder="请输入基金代码等查询"
                    v-model="inputvalue"
                ></el-input>
                <el-button
                    @click="search(inputvalue)"
                    style="margin-left: 10px; width: 90px"
                    type="primary"
                    ><i class="el-icon-search"></i>筛选</el-button
                >
                <el-button @click="clear" style="margin-left: 10px"
                    >清空筛选条件</el-button
                >
                <label style="margin-left: 20px" >输入新增</label>
                <el-input
                    id="input"
                    v-model="addvalue"
                    placeholder="请输入基金代码以新增活期"
                ></el-input>
                <el-button @click="addCurrentFund" style="margin-left: 10px; width: 90px" type="primary"
                    ><i class="el-icon-edit"></i>新增</el-button
                >
               <router-link to="/Home/dueondemand"> <el-button style="margin-left: 10px; width: 90px"
                    ><i class="el-icon-arrow-left"></i>返回</el-button
                ></router-link>
            </div>
            <div
                style="
                    width: 150px;
                    height: 36px;
                    background-color: #d3dce6;
                    margin-top: 15px;
                    border-radius: 5px;
                    margin-bottom: 15px;
                "
            >
                <i class="el-icon-menu"></i>
                <span>活期基金列表</span>
            </div>
            <el-table :data="tableData" stripe style="width: 100%">
                <el-table-column prop="code" label="基金代码" width="180">
                </el-table-column>
                <el-table-column prop="name" label="基金名" width="180">
                </el-table-column>
                <el-table-column prop="initial" label="首字母缩写">
                </el-table-column>
                <el-table-column prop="spelling" label="基金名称全拼">
                </el-table-column>
                <el-table-column prop="type" label="基金类型">
                </el-table-column>
            </el-table>
            <el-pagination
                background
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                :page-size="10"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1,
            total: 0,
            inputvalue: "",
            addvalue:""
        };
    },
    methods: {
        search(val) {
            this.getAllCurrentFund({ name: val });
        },
        //清空筛选条件
        clear() {
            this.inputvalue = "";
            this.getAllCurrentFund({ name: "" });
        },
        //获取所有可添加活期数据
        async getAllCurrentFund() {
            const res = await this.api.dueondemand.getAllCurrent({
                page: this.currentPage,
                name: this.inputvalue,
            });
            console.log(res);
            if (res.code) {
                this.tableData = res.data.list;
                this.total = res.data.total;
            }
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            this.getAllCurrentFund();
        },
        //新增活期
        async addCurrentFund(){
            const res = await this.api.dueondemand.addCurrentFund({
                code:this.addvalue
            });
            if(res.code){
                this.getAllCurrentFund();
            }
        }
    },
    created() {
        this.getAllCurrentFund();
    },
};
</script>

<style lang="scss" scoped>
#content {
    width: 80%;
    margin: 0 auto;
    background-color: white;
    line-height: 0;
    text-align: left;
    #search {
        margin-top: 10px;
        height: 40px;
        label {
            font-size: 14px;
            color: #606266;
            font-weight: 700;
        }
        .el-input {
            width: 185px;
            height: 100%;
            margin-left: 10px;
        }
    }
}
</style>